<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">

    <div class="row" style="background-color: white; height: 80px; padding: 13px; border: none; border-radius: 8px;">
<!--        <div class="col-md-1">-->
<!--            <label>投诉类型：</label>-->
<!--        </div>-->
<!--        <div class="col-md-3 " style="height: 20px; line-height: 20px;">-->
<!--            <select v-model="typeId"  class="form-control">-->
<!--                <option v-for="c in nameList" :value="c.comId">{{c.name}}</option>-->
<!--            </select>-->
<!--        </div>-->
        <div class="col-md-4" style="margin-left: 20px;margin-right: 5px;height:30px;line-height: 30px;">
            <lab style="float: left;margin-left: 20px;margin-right: 20px;">投诉类型：</lab>
            <select v-model="typeId"  class="form-control" style="float: left;width:140px;">
                <option value="null">请选择</option>
                <option v-for="c in nameList" :value="c.comId">{{c.name}}</option>
            </select>
        </div>
<!--        <div class="col-md-1">-->
<!--            <label>处理状态：</label>-->
<!--        </div>-->
<!--        <div class="col-md-3" style="height: 20px; line-height: 20px;">-->

<!--            <select v-model="Cstatus" class="form-control" style="float: left">-->
<!--                <option value="null">请选择</option>-->
<!--                <option value="0">未处理</option>-->
<!--                <option value="1">已处理</option>-->
<!--            </select>-->
<!--        </div>-->
        <div class="col-md-4" style="margin-left: 20px;margin-right: 5px;height:30px;line-height: 30px;">
            <lab style="float: left;margin-left: 20px;margin-right: 20px;">处理状态：</lab>
            <select v-model="Cstatus" class="form-control" style="float: left;width:140px;">
                <option value="null">请选择</option>
                <option value="0">未处理</option>
                <option value="1">已处理</option>
            </select>
        </div>
        <div class="col-md-3" style="height: 20px; line-height: 20px;">
            <button type="button" @click="doQuery()" class="btn btn-primary">搜索</button>
            <button type="button" @click="reset()" class="btn btn-primary">重置</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">添加</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>投诉信息列表</caption>
                <thead>
                <tr>
                    <th>投诉类型</th>
                    <th>投诉内容</th>
                    <th>投诉人</th>
                    <th>投诉时间</th>
                    <th>处理状态</th>
                    <th>处理人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="b in complaintList">
                    <td>{{b.name}}</td>
                    <td>{{b.remarks}}</td>
                    <td>{{b.userName}}</td>
                    <td>{{b.comDate}}</td>
                    <td>
                        <span v-if="b.status==1" style="background-color: #029688;padding: 5px 5px 5px 5px ;border-radius: 3px">已处理</span>
                        <span v-if="b.status==0" style="background-color: #ff5722;padding: 5px 5px 5px 5px ;border-radius: 3px">未处理</span>
                    </td>
                    <td>{{b.clr}}</td>
                    <td>
                        <button class="btn btn-primary" @click="doUpdate(b.id)">修改</button>
                        <button class="btn btn-danger" @click="doDelete(b.id)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p == pageIndex" class="active"><a @click="goTo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="goTo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            complaintList:null,//显示列表
            //处理状态
            Cstatus:null,
            //用于分页
            pageIndex:1,
            pageSize:3,
            pageTotal:0,
            pageNum:0,
            typeId:null,
            nameList:null
        },
        methods: {
            //请求房屋列表
            requestHouseList(p){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/complaint/list?pageIndex="+p+"&pageSize="+this.pageSize+"&typeId="+this.typeId+"&status="+this.Cstatus+"&uid="+uid).then(response =>{
                    //console.log(response.data);
                    this.complaintList = response.data.data;
                    this.pageTotal = response.data.pageTotal;
                    this.pageNum = Math.ceil(this.pageTotal/this.pageSize);
                    //console.log(this.pageTotle)
                })
            },
            goTo(p){
                this.pageIndex=p;
                this.requestHouseList(this.pageIndex);
            },
            doAdd(){
                window.parent.main_right.location.href = 'complaint_add_update.html';
            },
            doUpdate(id){
                window.parent.main_right.location.href = 'complaint_add_update.html?id='+id;
            },
            doDelete(id){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/complaint/delete?id="+id+"&uid="+uid).then(resq =>{
                    if (resq.data.code==200){
                        this.requestHouseList(this.pageIndex);
                    } else {
                        alert("删除失败哦")
                    }
                })
            },
            doQuery(){
                this.requestHouseList(this.pageIndex);
            },
            doName(){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/complaint/name?uid="+uid).then(response =>{
                    this.nameList = response.data.data;
                    console.log(response.data.data)
                })
            },
            reset(){
                this.nameList=null;
                this.Cstatus=null;
                this.typeId=null;
                this.requestHouseList(1);
                this.doName();
            }
        },
        created: function () {
            this.requestHouseList(this.pageIndex);
            this.doName();
        }
    });
</script>
</body>
</html>